<template>
	<view class="content">
		<!-- 	<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<view class="canvasItem">
			<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"
				@error="canvasIdErrorCallback"></canvas>

		</view>
		<view>
			<button @click="createCanvas">生成</button>
			<button @click="canvasDraw1">生成1</button>
			<button @click="canvasDraw2">生成2</button>
		</view>
	</view>
</template>

<script>
	const IMAGE_URL = '/static/logo.png'
	let context = uni.createCanvasContext('')

	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onReady() {


		},
		methods: {


			canvasIdErrorCallback(e) {
				console.error(e.detail.errMsg)
			},
			createCanvas() {
				context = uni.createCanvasContext('firstCanvas')

				context.setStrokeStyle("#00ff00")
				context.setLineWidth(5)
				context.rect(0, 0, 200, 200)
				context.stroke()
				context.setStrokeStyle("#ff0000")
				context.setLineWidth(2)
				context.moveTo(160, 100)
				context.arc(100, 100, 60, 0, 2 * Math.PI, true)
				context.moveTo(140, 100)
				context.arc(100, 100, 40, 0, Math.PI, false)
				context.moveTo(85, 80)
				context.arc(80, 80, 5, 0, 2 * Math.PI, true)
				context.moveTo(125, 80)
				context.arc(120, 80, 5, 0, 2 * Math.PI, true)
				context.fillText('hello world!', 100, 100, 3)
				context.stroke()
				context.draw()
				console.log('canvas 绘制完成')
			},
			canvasDraw1() {
				context.drawImage(IMAGE_URL)
				context.draw()
			},
			canvasDraw2() {
				context.drawImage(IMAGE_URL, 0, 0, 200, 200)
				context.draw()
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.canvasItem {
		border: 1px solid #000;
	}
</style>